<template>
    <div style="padding: 10px" class="order-query">
        <div class="search-area">
            <Row :gutter="20" type="flex">
                <i-col v-if="searchForm.seaFreightType == 1" span="5">
                    <Input placeholder="请输入集装箱号" size="large" v-model="searchForm.containerNo" clearable @on-enter="search">
                        <Icon slot="prefix" type="ios-cart-outline" />
                    </Input>
                </i-col>
                <i-col v-else span="5">
                    <Input placeholder="请输入提运单号" size="large" v-model="searchForm.blNo" clearable @on-enter="search">
                        <Icon slot="prefix" type="ios-cart-outline" />
                    </Input>
                </i-col>
                <i-col span="5">
                    <select-auto-complete
                        ref="transPort"
                        class="text-uppercase"
                        v-model="searchForm.finaDestCode"
                        :page-opt="tableOpt"
                        :clearable="true"
                        inputWidth="100%"
                        placeholder="请选择目的港"
                        :loading="transPortTableData.loading"
                        :total="transPortTableData.total"
                        :data="transPortTableData.list"
                        data-field="transPortTableData"
                        value-field="code"
                        size="large"
                        icon="ios-search"
                        label-field="code"
                        desc-field="englishName"
                        type="port"
                        style="width:100%;"
                        @on-change="onChange"
                    >
                    </select-auto-complete>
                </i-col>
                <i-col span="5">
                    <DatePicker v-model="searchForm.expectArrivalDate" size="large" type="daterange" placeholder="请选择到港时间" split-panels style="width: 100%;"></DatePicker>
                </i-col>
                <i-col span="5" style="display: flex;align-items: center;font-weight: 700;">
                    <RadioGroup v-model="searchForm.seaFreightType" @on-change="search">
                        <Radio :label="0" size="large">
                            按提运单
                        </Radio>
                        <Radio :label="1" size="large" style="margin-left: 30px">
                            按集装箱
                        </Radio>
                    </RadioGroup>
                </i-col>
                <i-col span="4">
                    <Button class="search-btn" @click="search">查询</Button>
                    <Button class="search-btn" @click="reset">重置</Button>
                </i-col>
            </Row>
        </div>
        <div class="content">
            <el-empty description="暂无数据" v-if="tableData.list.length == 0" :image-size="200"></el-empty>
            <Scroll :on-reach-bottom="handleReachBottom" :height="s_height" v-loading="loading" v-if="tableData.list && tableData.list.length > 0">
                <data-card v-for="item in tableData.list" :key="item.id" :data="item" :dictInfo="dictInfo" :seaFreightType="searchForm.seaFreightType"></data-card>
            </Scroll>
        </div>
    </div>
</template>

<script>
import DataCard from './dataCard';
import $ from 'jquery';
import api from '@/api/logisticsServices.js';
import baseCodeApi from '@/api/baseCode';
import SelectAutoComplete from '@/view/component/select-auto-complete/index';
export default {
    name: 'goodsInTransit',
    components: {
        DataCard,
        SelectAutoComplete
    },
    data() {
        return {
            transPortTableData: {
                loading: false,
                list: [],
                total: 0
            },
            tableOpt: {
                pageNum: 1,
                pageSize: 10,
                sortList: [],
                airPortFlag: 'SEASHIPPORT',
                codeType: 'PORTCD',
                searchKey: '',
                filterList: []
            },
            loading: false,
            searchForm: {
                seaFreightType: 0,
                blNo: '',
                containerNo: ''
            },
            tableData: {
                pageNum: 1,
                pageSize: 10,
                filterList: [],
                list: [
                    {
                        speedOfProgressShow: false
                    }
                ]
            },
            s_height: $(window).height() - 180,
            screenWidth: null,
            timer: null,
            dictInfo: {
                customerId: []
            }
        };
    },
    methods: {
        onChange(body, dataField) {
            this[dataField].loading = true;
            baseCodeApi.getSeaShipPortList(body).then(({data}) => {
                this[dataField].loading = false;
                if (data.returnCode === 200) {
                    this[dataField].list = data.returnData.pageInfo.list;
                    this[dataField].total = data.returnData.pageInfo.total;
                } else {
                    this.$Message.warning('数据异常,请重试！');
                }
            });
        },
        initData() {
            return new Promise(resolve => {
                let body = {
                    pageNum: this.tableData.pageNum,
                    pageSize: this.tableData.pageSize,
                    filterList: this.tableData.filterList,
                    seaFreightType: this.searchForm.seaFreightType
                }
                if (this.searchForm.orderStatus && this.searchForm.orderStatus.length > 0) {
                    body.orderStatusList = this.searchForm.orderStatus;
                }
                api.page(body).then(({ data }) => {
                    if (data.returnCode === 200) {
                        this.tableData.list = data.returnData.pageInfo.list;
                        resolve();
                    } else {
                        this.$Message.error(data.returnMsg);
                    }
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        handleReachBottom() {
            return new Promise(resolve => {
                this.tableData.pageSize += 10;
                this.initData().then(() => {
                    resolve();
                });
            });
        },
        getDictData() {
            baseCodeApi.getOftenTypeByUserId().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.matType = data.returnData.map(i => {
                        return {
                            dictName: i.companyMatName,
                            dictValue: i.companyMatCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg, 'error');
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getContractDictData().then(({ data }) => {
                if (data.returnCode === 200) {
                    const { platformWarehouseList, customerList } = data.returnData;
                    this.dictInfo.whCode = platformWarehouseList.map(i => {
                        return {
                            dictName: i.whName,
                            dictValue: i.id
                        };
                    });
                    this.dictInfo.customerId = customerList.map(i => {
                        return {
                            dictName: i.customerName,
                            dictValue: i.id,
                            customerCode: i.customerCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });

            // 字典
            baseCodeApi.getDictDataByDictTypeList([
                'CONTRACT_STATUS',
                'INVOICE_TYPE',
                'FLIE_TYPE',
                'BUSINESS_TYPE',
                'FEE',
                'BILL_TYPE',
                'ORDER_BUSINESS_TYPE',
                'AGENCY_FEE_TYPE',
                'REPAYMENT_TYPE',
                'RELEASE_TYPE',
                'CHARGE_DIMENSION',
                'DEDUCTION_METHOD',
                'CHARGING_METHOD',
                'PaymentMethod',
                'PAY_COLLECT_FLAG',
                'TRADE_TYPE',
                'TRANS_STATUS',
                'TRADE_MODE',
                'CHARGE_STATUS',
                'DAMAGED_SIGN',
                'CIRCULATION_STATUS',
                'PAYMENT_STATUS',
                'CIRCULATION_TYPE',
                'BILL_STATUS'
            ]).then(({ data }) => {
                if (data.returnCode === 200) {
                    const { returnData } = data;
                    // dataInfo.menuList = data.returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.dictArr = returnData;
                    this.dictInfo.contractStatus = returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.businessType = returnData.filter(item => item.dictType === 'ORDER_BUSINESS_TYPE');
                    this.dictInfo.agencyFeesCalType = returnData.filter(item => item.dictType === 'AGENCY_FEE_TYPE');
                    this.dictInfo.repaymentType = returnData.filter(item => item.dictType === 'REPAYMENT_TYPE');
                    this.dictInfo.tradeMode = returnData.filter(item => item.dictType === 'TRADE_MODE');
                    this.dictInfo.releaseType = returnData.filter(item => item.dictType === 'RELEASE_TYPE');
                    this.dictInfo.measureUnit = returnData.filter(item => item.dictType === 'CHARGE_DIMENSION');
                    this.dictInfo.invotp = returnData.filter(item => item.dictType === 'INVOICE_TYPE');
                    this.dictInfo.fileType = returnData.filter(item => item.dictType === 'FLIE_TYPE');
                    this.dictInfo.earnestMoneyDeductionMethod = returnData.filter(item => item.dictType === 'DEDUCTION_METHOD');
                    this.dictInfo.agencyChargingMethod = returnData.filter(item => item.dictType === 'CHARGING_METHOD');
                    this.dictInfo.PaymentMethod = returnData.filter(item => item.dictType === 'PaymentMethod');
                    this.dictInfo.currency = returnData.filter(item => item.dictType === 'FEE');
                    this.dictInfo.sfbz = returnData.filter(item => item.dictType === 'PAY_COLLECT_FLAG');
                    this.dictInfo.bustype = returnData.filter(item => item.dictType === 'BUSINESS_TYPE');
                    this.dictInfo.formsOfCommerce = returnData.filter(item => item.dictType === 'TRADE_TYPE');
                    this.dictInfo.transStatus = returnData.filter(item => item.dictType === 'TRANS_STATUS');
                    this.dictInfo.billType = returnData.filter(item => item.dictType === 'BILL_TYPE');
                    this.dictInfo.chargeStatus = returnData.filter(item => item.dictType === 'CHARGE_STATUS');
                    this.dictInfo.damagedSign = returnData.filter(item => item.dictType === 'DAMAGED_SIGN');
                    this.dictInfo.circulationType = returnData.filter(item => item.dictType === 'CIRCULATION_STATUS');
                    this.dictInfo.paymentStatus = returnData.filter(item => item.dictType === 'PAYMENT_STATUS');
                    this.dictInfo.tranType = returnData.filter(item => item.dictType === 'CIRCULATION_TYPE');
                    this.dictInfo.billStatus = returnData.filter(item => item.dictType === 'BILL_STATUS');
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        reset() {
            this.tableData.filterList = [];
            this.searchForm.containerNo = '';
            this.searchForm.blNo = '';
            this.searchForm.finaDestCode = '';
            this.searchForm.expectArrivalDate = [];
            this.initData();
        },
        search() {
            this.loading = true;
            this.tableData.filterList = [];
            if (this.searchForm.seaFreightType == 1) {
                this.searchForm.blNo = '';
            } else {
                this.searchForm.containerNo = '';
            }
            if (this.searchForm.containerNo) {
                this.tableData.filterList.push({
                    filterKey: 'containerNo',
                    filterValue: this.searchForm.containerNo
                });
            }
            if (this.searchForm.blNo) {
                this.tableData.filterList.push({
                    filterKey: 'blNo',
                    filterValue: this.searchForm.blNo
                });
            }
            if (this.searchForm.finaDestCode) {
                this.tableData.filterList.push({
                    filterKey: 'finaDestCode',
                    filterValue: this.searchForm.finaDestCode
                });
            }
            if (this.searchForm.expectArrivalDate) {
                this.tableData.filterList.push({
                    filterKey: 'expectArrivalDateStart',
                    filterValue: this.searchForm.expectArrivalDate[0] ? this.$utils.dateToDateStr(this.searchForm.expectArrivalDate[0]) : null
                });
                this.tableData.filterList.push({
                    filterKey: 'expectArrivalDateEnd',
                    filterValue: this.searchForm.expectArrivalDate[1] ? this.$utils.dateToDateStr(this.searchForm.expectArrivalDate[1]) : null
                });
            }
            this.initData();
        }
    },
    mounted() {
        this.loading = true;
        if (this.$route.query.date) {
            this.searchForm.expectArrivalDate = JSON.parse(this.$route.query.date).map(x => new Date(x));
            this.search();
        } else {
            this.initData();
        }
        this.getDictData();
        const that = this
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }

    },
    watch:{
        screenWidth(val){
            if(!this.timer){
                this.timer = true
                let that = this
                setTimeout(function(){
                    console.log($(window).height())
                    that.s_height = $(window).height() - 180;
                    that.timer = false
                },400)
            }
        }
    }
};
</script>

<style lang="less">
.order-query {
    height: 100% !important;
    .ivu-tooltip-inner {
        background-color: rgba(70, 76, 91, 0.6)!important;
        font-weight: normal!important;
    }
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(70, 76, 91, 0.6)!important;
    }
}
</style>
<style scoped lang="less">
.search-area {
    width: 100%;
    padding: 10px 20px 10px 20px;
    .search-btn {
        background-color: #4f68e8;
        color: #fff;
        width: 40%;
        max-width: 120px;
    }
    .add-btn {
        background-color: #3e4c64;
        color: #fff;
        margin-left: 5%;
        width: 40%;
        max-width: 120px;
    }
}

.content {
    background-color: rgb(244,247,250);
    padding: 10px 20px 10px 20px;
    height: 100%
}
.border-test {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    border-radius: 50%;
    transform: rotate(45deg);
}
</style>
